<template>
	<view>
		<nav-bar title ="用车记录"></nav-bar>
		<view>
			<up-list @scrolltolower="scrolltolower" >
				<up-list-item v-for="(item, index) in indexList" :key="item.coid" @click="handleClickItem(item)">
					<uni-section>
						<up-cell-group :customStyle='groupStyle'>
							<view class="units-list">
								<view class="units-list-item-arrow">
									<image src="@/static/images/use/use_car.png" style="width: 24px;height: 24px;"></image>
								</view>
								<view class="units-list-item">
									<view class="units-list-item-content">
											<view class="units-list-item-content-title">
												{{item.usercompanyname}}：{{ item.usemanname }}
											</view>
											<view class="units-list-item-content-desc">
												
												{{item.usebegindate}}
											</view>
									</view>
									<view class="units-list-item-content">
											<view class="units-list-item-content-model location">
												<text>目的地：{{item.useendaddress}}</text>
											</view>
											<view class="units-list-item-content-desc orange">
												<!-- <text>{{item.applystatus}}</text> -->
												<text>{{getStatusResult(item.applystatus)}}</text>
											</view>
									</view>
								</view>
								
							</view>
							<view class="units-list-buttons">
								<!-- <view class="units-list-buttons-button blue">
									<text class="units-list-buttons-button-text">撤回</text>
								</view> -->
								<view class="units-list-buttons-button gray-boder" @click="handleClickItem(item)">
									<text class="units-list-buttons-button-text gray">查看详情</text>
								</view>
							</view>
						</up-cell-group>
					</uni-section>
				</up-list-item>
				<up-loadmore v-show="noMore" status="nomore" />
			</up-list>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import NavBar from '@/components/NavBar.vue';
import { getSYList } from '@/api/use';
	const type = ref('');
	const LX = ref('')
	const indexList = ref([]);
	const currentPage = ref(1);
	const groupStyle = ref({
		'background-color': '#fff'
	});
	const nomoreText = ref('没有更多了');
	 const noMore = ref(false);
	 const auditResults = ref( [
  {
    value: "0",
    label: "待审核",
  },
  {
    value: "1",
    label: "待审批",
  },
  {
    value: "2",
    label: "审批通过",
  },
  {
    value: "3",
    label: "调度完毕",
  },
  {
    value: "4",
    label: "司机出车登记",
  },
  {
    value: "5",
    label: "司机回执订单结束",
  },
  {
    value: "6",
    label: "审核被拒结束",
  },
  {
    value: "7",
    label: "审批被拒结束",
  },
  {
    value: "8",
    label: "超时",
  },
  {
    value: "9",
    label: "调度前取消订单",
  },
  {
    value: "10",
    label: "调度后取消订单",
  },
  {
    value: "101",
    label: "简版用车待审批",
  },
  {
    value: "11",
    label: "跳转集中平台",
  },
  {
    value: "12",
    label: "变更等待审核",
  },
  {
    value: "13",
    label: "变更已审核",
  },
  {
    value: "14",
    label: "变更审核不通过",
  },
  {
    value: "15",
    label: "变更审批通过",
  },
  {
    value: "16",
    label: "变更审批不通过",
  },
  {
    value: "17",
    label: "待审批人2审批",
  },
  {
    value: "18",
    label: "审批人2审批不通过",
  },
  {
    value: "19",
    label: "调度排队中",
  },
  {
    value: "20",
    label: "通过",
  },
])
	onLoad((option) => {
		type.value = option.type
		if(type.value === 'personal'){
			LX.value = '1'
		}
		loadmore();
	});

	const scrolltolower = () => {
		// currentPage.value = 1;
		// loadmore();
		currentPage.value++;
		loadmore()
	};

	const loadmore = () => {
		serverCarList()
	};

	function serverCarList(){
		let params = {
			PZ:10,
			PN:currentPage.value,
			type:0,
			usemode:'04',
			LX:LX.value
		}
		getSYList(params).then(res => {
			if(res.code === 1){
				if(currentPage.value === 1){
					indexList.value.splice(0);
				}
				// indexList.value = res.data.table;
				res.data.table.forEach(element => {
					indexList.value.push(element);
				});
				if(res.data.table.length<10){
					noMore.value=true
				}else{
					noMore.value=false
				}
			}else{
				noMore.value=false
			}
		})
	}
	//  点击列表项
	function handleClickItem(item) {
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/use/apply/detail/unitIndex?id=' + item.id+'&apid='+item.apid+'&seid='+item.seid
		})

	}
	
	function getStatusResult(value){
		let obj = auditResults.value.find(item=>{
			if(item.value == value){
				return item
			}
		})
		if(obj!=undefined||obj!=null){
			return obj.label
		}
	}
</script>

<style lang="scss" scoped>
	.units-list {
		padding: $uni-spacing-row-lg;
		background-color: #fff;
		border-bottom: 1px solid #E8EBEE;
		display: flex;
		flex-direction: row;
		&-item {
			display: flex;
			flex-direction: column;
			width: calc(100% - 20px);
			&-content {
				// flex: 1;
				display: flex;
				flex-direction: row;
				margin-left: $uni-spacing-row-lg;
				align-items: center;
	
				&-title {
					font-size: 15px;
					color: #333;
					margin-top:$uni-spacing-row-sm ;
					width: 70%;
				}
				&-model {
					font-size: 13px;
					color: #999;
					margin-top:$uni-spacing-row-sm ;
					width: 60%;
				}
				&-desc {
					text-align: right;
					font-size: 13px;
					color: #999;
					width: 100%;
					
				}
	
	
			}
			&-arrow{
				margin-left: 10px;
				display: flex;
				margin-top: 10px;
			}
		}
		&-buttons{
			display: flex;
			flex-direction: row;
			margin-top: 10px;
			margin-right: 10px;
			justify-content: end;
			grid-row: 10px;
			&-button{
				width: 80px;
				height: 26px;
				border-radius: 13px;
				text-align: center;
				align-items: center;
				line-height: 26px;
				margin-bottom: 10px;
				&-text{
					text-align: center;
					font-size: 12px;
					color: #3C88D8;
					padding: 10px;
				}
			}
		}
	}
	.gray{
		color: #D2D5D8;
	}
	.gray-boder{
		border: 1px solid #D2D5D8;
	}
	.orange{
		color:#F69B1B ;
	}
	.blue-border{
		border: 1px solid #3C88D8;
	}
	.blue{
		color: #3C88D8;
	}
	
</style>